<template>
  <div class="wallet">
    <div class="header">
      <div class="label">我的余额（元）</div>
      <div class="money">{{form.balance | balanceFilter | numFilter}}</div>
      <div class="extract" @click="extract()"></div>
    </div>
    <div class="line"></div>
    <div class="main">
      <div class="li" @click="transaction">
        <div class="left">
          <span>交易明细</span>
        </div>
        <div class="right">
          <img src="@/assets/images/ic_right.png" alt="">
        </div>
      </div>
      <div class="li" @click="bankCard">
        <div class="left">
          <span>我的银行卡</span>
        </div>
        <div class="right">
          <img src="@/assets/images/ic_right.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   *  钱包
   * @Author zzl
   * @Date 2019/5/17 16:21.
   */
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend'

  export default {
    mounted() {
      this.loadData();
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        form: {}
      }
    },
    computed: {},
    methods: {
      loadData() {
        let params = {
          open_id: utils.getCookie('open_id_' + this.wechatId),
        };
        Indicator.open('加载中...');
        this.$axios.userBalance(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg)
          }
          this.form = res.data;
        })
      },
      /*
      * 提现
      * */
      extract() {
        this.$router.push({path: '/extract'})
      },
      /*
      * 交易明细
      * */
      transaction() {
        this.$router.push({path: '/transaction'})
      },
      /*
      * 银行卡
      * */
      bankCard() {
        this.$router.push({path: '/bankCard'})
      }
    },
    watch: {},
    filters: {
      balanceFilter(val) {
        if (utils.isNone(val)) {
          return '0'
        } else {
          return val;
        }
      },
      numFilter(value) {
        // 截取当前数据到小数点后两位
        let realVal = parseFloat(value).toFixed(2);
        return realVal
      }

    },
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .wallet {
    height: 100%;
    width: 100%;
    background: white;
    overflow: hidden;
    .header {
      width: 7.1rem;
      height: 2.74rem;
      margin: 0.3rem auto 1rem;
      background: url("../../../../assets/images/wallet.png") no-repeat;
      background-size: 100% 100%;
      position: relative;

      .label {
        font-size: 0.28rem;
        color: white;
        position: absolute;
        top: 0.69rem;
        left: 0.34rem;
      }

      .money {
        font-size: 0.6rem;
        color: white;
        position: absolute;
        top: 1.27rem;
        left: 0.4rem;
      }

      .extract {
        width: 1.56rem;
        height: 0.52rem;
        background: url("../../../../assets/images/ic_withdraw.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0.92rem;
        right: 0.1rem;
      }
    }

    .line {
      width: 100%;
      height: 0.12rem;
      background: #FAFAFA;
    }

    .main {
      width: 100%;
      padding-left: 0.42rem;
      box-sizing: border-box;

      .li {
        width: 100%;
        height: 1rem;
        border-bottom: 1px solid #F6F6F6;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .left {
          display: flex;
          flex-direction: column;

          span {
            font-size: 0.3rem;
            color: #333333;
          }
        }

        .right {
          img {
            width: .1rem;
            height: 0.2rem;
            margin-right: 0.4rem;
          }
        }
      }
    }
  }
</style>
